<template>
  <div v-if="data.length">
    <v-chart
      :force-fit="true"
      :height="height"
      :data="sdata"
      :scale="scale"
      padding="auto"
    >
      <!-- <v-tooltip /> -->
      <v-axis />
      <!-- <v-legend /> -->
      <v-line position="month*temperature" color="city" />
      <v-point
        position="month*temperature"
        color="city"
        :size="4"
        :v-style="style"
        :shape="'circle'"
      />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require("@antv/data-set");

export default {
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler(list) {
        list = [...list];
        list = list.reverse();
        list.length = 5;
        list = list.reverse();

        const sourceData = [];
        const arr = [3, 4, 1, 3, 6];

        list.forEach((row, i) => {
          const hour = (row.hour > 9 ? row.hour : "0" + row.hour) + ":00";

          sourceData.push({
            month: hour,
            客流: row.number * 1 + (30 + arr[i])
          });
        });

        const dv = new DataSet.View().source(sourceData);
        dv.transform({
          type: "fold",
          fields: ["客流"],
          key: "city",
          value: "temperature"
        });
        const data = dv.rows;

        const scale = [
          {
            dataKey: "month",
            min: 0,
            max: 1
          }
        ];

        this.sdata = data;
        this.scale = scale;
      }
    }
  },
  data() {
    return {
      sdata: [],
      scale: [],
      height: (window.innerWidth / 1920) * 150,
      style: { stroke: "#fff", lineWidth: 1 }
    };
  }
};
</script>
